<template>
  <div>
    <div class="ss">
      <div class="container nav">
        <div class="hy">
          {{ (userInfo && userInfo["dwmc"]) || "请先登录，" }}欢迎进入
        </div>
        <div class="ss_box">
          <div class="input">
            <i class="el-icon-search"></i
            ><input
              v-model="keyWord"
              placeholder="搜索"
              v-on:keyup.enter='toSearch'
            />
          </div>

          <button @click="openShow">
            <i class="el-icon-user"></i>
            <span v-if="userInfo && userInfo['dwmc']"
              >{{ userInfo && userInfo["dwmc"] }}，个人中心</span
            >
            <span v-else>登录/注册</span>
          </button>
        </div>
      </div>
    </div>
    <div class="head container">
      <div class="logo">LOGO</div>
      <div class="router">
        <div class="tags" v-for="item in routers" :key="item.path">
          <nuxt-link :to="item.path">{{ item.title }}</nuxt-link>
        </div>
      </div>
    </div>
    <div class="poup" @click="close" v-if="show">
      <div class="login_box">
        <div class="logn_plan" @click.stop="">
          <div class="title">登录</div>
          <div class="from">
            <el-input
              placeholder="请输入账号"
              prefix-icon="el-icon-user"
              v-model="form.username"
            />
            <el-input
              placeholder="请输入密码"
              type="password"
              prefix-icon="el-icon-unlock"
              show-password
              style="margin-top: 19px"
              v-model="form.passwrod"
            />
            <button @click.stop="login">登 录</button>
            <div class="tish" @click="goRouter">
              没有账号，现在<span style="color: #106fd1">注册</span>
            </div>
          </div>
        </div>
        <div class="close">
          <i class="el-icon-close" style="color: #ededed; font-size: 33px"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTonke } from "@/utils/user.js";
export default {
  name: "Header",
  data() {
    return {
      routers: [
        {
          title: "首页",
          path: "/",
        },
        {
          title: "交易公告",
          path: "/transaction",
        },
        {
          title: "意向公开",
          path: "/intention",
        },
        {
          title: "市场调查",
          path: "/market",
        },
        {
          title: "通知公告",
          path: "/notice",
        },
        {
          title: "政策法规",
          path: "/policy",
        },
        {
          title: "关于我们",
          path: "/about",
        },
      ],
      show: false,
      form: {
        username: "",
        passwrod: "",
      },
      userInfo: null,
      /**fasle未登录 */
      isLogin: false,
      keyWord: "",
    };
  },
  created() {},
  mounted() {
    getTonke((info) => {
      this.userInfo = info["getuserInfo"];
      this.isLogin = !!info["getToken"];
    });
    this.$nuxt.$on("login", () => {
      this.openShow();
    });
  },

  methods: {
    openShow() {
      if (this.isLogin) {
        this.$router.push("/personal");
        return;
      }
      this.show = true;
    },
    login() {
      let { form } = this;
      if (!form["username"] || !form["passwrod"]) {
        return this.$message.error("请输入用户名和密码");
      }
      this.$api.loginAPI(form, () => {
        this.show = false;
      });
    },
    goRouter() {
      this.$router.push("/register");
      this.show = false;
    },
    close() {
      this.show = false;
    },
    toSearch() {
      if (!this.keyWord) {
        return this.$message.error("请输入搜索内容");
      }
      this.$router.push({
        path: "/transaction",
        query: {
          keyWord: this.keyWord,
        },
      });
    },
  },
};
</script>
<style  scoped>
.poup {
  position: fixed;
  z-index: 999;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100vw;
  height: 100vh;
}
.poup .login_box {
  width: 500px;
  display: flex;
  margin: 0 auto;
  margin-top: 30vh;
}
.poup .login_box .logn_plan {
  width: 100%;
  background-color: white;
  margin-right: 21px;
  border-radius: 8px;
}
.poup .login_box .logn_plan .title {
  text-align: center;
  font-size: 27px;
  margin-top: 41px;
}
.poup .login_box .logn_plan .from {
  margin: 41px;
}
.poup .login_box .logn_plan button {
  width: 100%;
  height: 41px;
  border-radius: 8px;
  background-color: #106fd1;
  color: white;
  margin-top: 20px;
}
.poup .login_box .logn_plan .tish {
  text-align: center;
  margin-top: 14px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
.nuxt-link-exact-active.nuxt-link-active {
  color: #3c7eff;
  border-bottom: 2px solid #3c7eff;
  padding-bottom: 10px;
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.head .router {
  display: flex;
}
.head .router .tags {
  margin-left: 31px;
}

.head .logo {
  height: 60px;
  line-height: 60px;
  color: white;
  background-color: #2958b0;
  width: 200px;
  text-align: center;
}

.ss {
  background-color: #f8f8f8;
  height: 40px;
  margin-bottom: 5px;
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hy {
  color: #9d9d9d;
  font-size: 14px;
}

.ss .ss_box {
  display: flex;
}

.ss .ss_box .input {
  background-color: white;
  border-radius: 15px;
  width: 160px;
  padding: 5px;
  color: #9d9d9d;
  font-size: 14px;
  margin-right: 15px;
  display: flex;
  align-items: center;
}
.ss .ss_box .input input {
  border: none;
  outline: none;
  width: 100%;
}

.ss .ss_box button {
  background-color: #2958b0;
  border-radius: 15px;
  color: white;
  padding: 5px 15px;
}
</style>